<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>renren-aui</title>
  <link rel="stylesheet" href="../../aui/plugins/ionicons-4.3.0/css/ionicons.min.css">
  <link rel="stylesheet" href="../../aui/css/element-theme/index.css">
  <link rel="stylesheet" href="../../aui/css/aui.css">
</head>
<body>
  <div v-cloak class="aui-wrapper aui-page__form-advanced">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <el-card shadow="never">
          <template slot="header">
            <span class="aui-card__title">仓库管理</span>
          </template>
          <el-form class="advanced-form" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库名" prop="name">
                  <el-input v-model="dataForm.name" placeholder="仓库名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库域名" prop="url" style="height: 80px;">
                  <el-input v-model="dataForm.url" placeholder="仓库域名">
                    <template slot="prepend">http://</template>
                    <template slot="append">.com</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库管理员" prop="owner">
                  <el-select v-model="dataForm.owner" placeholder="请选择" style="width: 100%;">
                    <el-option :value="1" label="张三"></el-option>
                    <el-option :value="2" label="李四"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="审批人" prop="approver">
                  <el-input v-model="dataForm.approver" placeholder="审批人"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="生效日期" prop="dateRange">
                  <el-date-picker
                    v-model="dataForm.dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width: 100%;">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="仓库类型" prop="type">
                  <el-select v-model="dataForm.type" placeholder="请选择" style="width: 100%;">
                    <el-option :value="1" label="私密"></el-option>
                    <el-option :value="2" label="公开"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never">
          <template slot="header">
            <span class="aui-card__title">任务管理</span>
          </template>
          <el-form class="advanced-form" :model="dataForm2" :rules="dataRule2" ref="dataForm2" @keyup.enter.native="dataForm2SubmitHandle()">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="任务名" prop="name2">
                  <el-input v-model="dataForm2.name2" placeholder="任务名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="任务描述" prop="url2">
                  <el-input v-model="dataForm2.url2" placeholder="任务描述"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="执行人" prop="owner2">
                  <el-select v-model="dataForm2.owner2" placeholder="请选择" style="width: 100%;">
                    <el-option :value="1" label="张三"></el-option>
                    <el-option :value="2" label="李四"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="责任人" prop="approver2">
                  <el-select v-model="dataForm2.approver2" placeholder="请选择" style="width: 100%;">
                    <el-option :value="1" label="张三"></el-option>
                    <el-option :value="2" label="李四"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="生效日期" prop="dateRange2">
                  <el-time-picker
                    v-model="dataForm2.dateRange2"
                    placeholder="提醒时间"
                    style="width: 100%;">
                  </el-time-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8">
                <el-form-item label="任务类型" prop="type2">
                  <el-select v-model="dataForm2.type2" placeholder="请选择" style="width: 100%;">
                    <el-option :value="1" label="私密"></el-option>
                    <el-option :value="2" label="公开"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card shadow="never">
          <template slot="header">
            <span class="aui-card__title">成员管理</span>
          </template>
          <el-table
            :data="dataList"
            border
            v-loading="dataListLoading"
            style="width: 100%">
            <el-table-column
              prop="id"
              header-align="center"
              align="center"
              width="80"
              label="ID">
            </el-table-column>
            <el-table-column
              prop="name"
              header-align="center"
              align="center"
              label="成员姓名">
              <template slot-scope="scope">
                <el-input v-if="scope.row.status === 'edit'" :data-id="scope.row.id" v-model="scope.row.name" placeholder="成员姓名"></el-input>
                <span v-else>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="workId"
              header-align="center"
              align="center"
              label="工号">
              <template slot-scope="scope">
                <el-input v-if="scope.row.status === 'edit'" :data-id="scope.row.id" v-model="scope.row.workId" placeholder="工号"></el-input>
                <span v-else>{{ scope.row.workId }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="department"
              header-align="center"
              align="center"
              label="所属部门">
              <template slot-scope="scope">
                <el-input v-if="scope.row.status === 'edit'" :data-id="scope.row.id" v-model="scope.row.department" placeholder="所属部门"></el-input>
                <span v-else>{{ scope.row.department }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              width="150"
              label="操作">
              <template slot-scope="scope">
                <template v-if="scope.row.status === 'edit'">
                  <el-button v-if="scope.row.isNew" type="text" size="small" @click="addHandle(scope.row)">新增</el-button>
                  <el-button v-else type="text" size="small" @click="saveHandle(scope.row)">保存</el-button>
                  <el-button type="text" size="small" @click="cancelHandle(scope.row)">取消</el-button>
                </template>
                <template v-else>
                  <el-button type="text" size="small" @click="editHandle(scope.row)">编辑</el-button>
                  <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="aui-button--dashed aui-button--dashed-add" @click="addRowHandle()" size="small"><i class="icon ion-ios-add"></i>新增成员</el-button>
        </el-card>
        <div class="advanced-toolbar clearfix">
          <div class="fl"></div>
          <div class="fr">
            <el-popover
              v-if="errorIconVisible"
              placement="top"
              title="表单校验信息"
              width="200"
              trigger="click"
              popper-class="advanced-error-popper">
              <ul class="advanced-error-popper__list">
                <li v-for="item in errorList" @click="errorHandle(item[0].field)">
                  <i class="icon ion-ios-close-circle-outline"></i>
                  <div>{{ item[0].message }}</div>
                  <div class="field">{{ item[0].fieldName }}</div>
                </li>
              </ul>
              <span slot="reference" class="advanced-error-icon">
                <i class="icon ion-ios-information-circle"></i>
                {{ errorList.length }}
              </span>
            </el-popover>
            <el-button type="primary" size="small" @click="dataFormSubmitHandle()">提交</el-button>
          </div>
        </div>
      </main>
    </div>
  </div>
  <script src="../../aui/plugins/vue-2.5.17/vue.js"></script>
  <script src="../../aui/plugins/element-2.4.5/index.js"></script>
  <script src="../../aui/plugins/axios-0.18.0/axios.min.js"></script>
  <script src="../../aui/plugins/es6-promise-4.2.4/es6-promise.auto.min.js"></script>
  <script>
    (function () {
      var vm = window.vm = new Vue({
        el: '.aui-wrapper',
        data: function () {
          return {
            fieldLabels: {
              name: '仓库名',
              url: '仓库域名',
              owner: '仓库管理员',
              approver: '审批人',
              dateRange: '生效日期',
              type: '仓库类型',
              name2: '任务名',
              url2: '任务描述',
              owner2: '执行人',
              approver2: '责任人',
              dateRange2: '生效日期',
              type2: '任务类型'
            },
            dataForm: {
              name: '',
              url: '',
              owner: '',
              approver: '',
              dateRange: null,
              type: ''
            },
            dataRule: {
              name: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              url: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              owner: [
                { required: true, message: '必填项不能为空', trigger: 'change' }
              ],
              approver: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              dateRange: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              type: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
            },
            dataForm2: {
              name2: '',
              url2: '',
              owner2: '',
              approver2: '',
              dateRange2: null,
              type2: ''
            },
            dataRule2: {
              name2: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              url2: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              owner2: [
                { required: true, message: '必填项不能为空', trigger: 'change' }
              ],
              approver2: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              dateRange2: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ],
              type2: [
                { required: true, message: '必填项不能为空', trigger: 'blur' }
              ]
            },
            dataList: [
              {
                id: 1,
                workId: '00001',
                name: 'John Brown',
                department: 'New York No. 1 Lake Park',
                status: 'show'
              },
              {
                id: 2,
                workId: '00002',
                name: 'Jim Green',
                department: 'London No. 1 Lake Park',
                status: 'show'
              },
              {
                id: 3,
                workId: '00003',
                name: 'Joe Black',
                department: 'Sidney No. 1 Lake Park',
                status: 'show'
              }
            ],
            dataListLoading: false,
            errorIconVisible: false,
            errorList: []
          }
        },
        beforeCreate () {
          vm = this;
        },
        methods: {
          // 新增行
          addRowHandle () {
            var id = vm.dataList.length + 1;
            vm.dataList.push({
              id: id,
              workId: '',
              name: '',
              department: '',
              status: 'edit',
              isNew: true
            });
            vm.$nextTick(function () {
              document.querySelectorAll('input[data-id="'+ id +'"]')[0].focus();
            });
          },
          // 新增
          addHandle (row) {
            if (!row.name || !/\S/.test(row.name) || !row.workId || !/\S/.test(row.workId) || !row.department || !/\S/.test(row.department)) {
              return window.parent.vm.$message.error('请填写完整成员信息。');
            }
            row.isNew = false;
          },
          // 保存
          saveHandle (row) {
            if (!row.name || !/\S/.test(row.name) || !row.workId || !/\S/.test(row.workId) || !row.department || !/\S/.test(row.department)) {
              return window.parent.vm.$message.error('请填写完整成员信息。');
            }
            vm.dataListLoading = true;
            window.setTimeout(function () {
              vm.dataListLoading = false;
              row.status = 'show';
            }, 500);
          },
          // 编辑
          editHandle (row) {
            row.status = 'edit';
            vm.$nextTick(function () {
              document.querySelectorAll('input[data-id="'+ row.id +'"]')[0].focus();
            });
          },
          // 取消
          cancelHandle (row) {
            row.status = 'show';
          },
          // 删除
          deleteHandle (id) {
            this.$confirm('确定对[id=' + id + ']进行[删除}]操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(function () {
              vm.dataList = vm.dataList.filter(function (item) {
                return item.id !== id;
              });
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            }).catch(function () {});
          },
          // 表单提交
          dataFormSubmitHandle: function () {
            Promise.all([
              new Promise(function (resolve, reject) {
                vm.$refs['dataForm'].validate(function (valid, fieldsError) {
                  resolve(valid || fieldsError);
                });
              }),
              new Promise(function (resolve, reject) {
                vm.$refs['dataForm2'].validate(function (valid, fieldsError) {
                  resolve(valid || fieldsError);
                });
              })
            ]).then(function (res) {
              vm.errorList = [];
              if (res[0] !== true && res[1] !== true) {
                vm.errorIconVisible = true;
                for (var key in res[0]) {
                  res[0][key][0]['fieldName'] = vm.fieldLabels[key];
                  vm.errorList.push(res[0][key]);
                }
                for (var key in res[1]) {
                  res[1][key][0]['fieldName'] = vm.fieldLabels[key];
                  vm.errorList.push(res[1][key]);
                }
              } else {
                window.parent.vm.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: function () {
                    console.log(vm.dataForm);
                  }
                });
              }
            });
          },
          // 错误信息
          errorHandle (fieldKey) {
            var labelNode = document.querySelector('label[for="' + fieldKey + '"]');
            if (labelNode) {
              labelNode.scrollIntoView(true);
            }
          }
        }
      });
    })();
  </script>
</body>
</html>